<template>
  <a-modal v-model:visible="visible" width="70%" :mask-closable="false" @ok="save" @cancel="close" style="transform: scale(1.3)">
    <template #title>
      <span style="font-size: 24px">{{ formData.machine_name }}</span>
    </template>
    <a-descriptions :column="1" :value-style="{ paddingRight: 0 }">
      <a-descriptions-item label="所属产线:">
        <a-select size="large" v-model.trim="formData.product_name" :style="{ height: '50px' }" placeholder="请选择所属产线" allow-clear>
          <a-option v-for="item of machineOptions" style="zoom: 2" :value="item.value" :label="item.label" />
        </a-select>
      </a-descriptions-item>
      <a-descriptions-item label="生产品种:" v-if="setting.sm.machineBreed">
        <a-select size="large" v-model.trim="formData.breed_name" :style="{ height: '50px', margin: '20px 0' }" placeholder="请选择生产品种" allow-clear>
          <a-option v-for="item of breedOptions" style="zoom: 2" :value="item.value" :label="item.label" />
        </a-select>
      </a-descriptions-item>
      <a-descriptions-item label="机台状态:">
        <button @click.prevent="formData.status = 1" :class="formData.status == 1 ? 'openClick-active' : 'openClick'">启用</button>
        <button @click.prevent="formData.status = 0" :class="formData.status == 0 ? 'prohibitClick-active' : 'prohibitClick'">禁用</button>
      </a-descriptions-item>
      <!-- <a-descriptions-item label="轨道优先:" v-if="setting.sm.guidao && formData.process_name == '并粗工序段'">
        <button @click.prevent="formData.if_change_ps = 1" :class="formData.if_change_ps == 1 ? 'openClick-active' : 'openClick'">启用</button>
        <button @click.prevent="formData.if_change_ps = 0" :class="formData.if_change_ps == 0 ? 'prohibitClick-active' : 'prohibitClick'">禁用</button>
      </a-descriptions-item> -->
      <a-descriptions-item label="自动模式:">
        <button @click.prevent="formData.sm_auto = 1" :class="formData.sm_auto == 1 ? 'openClick-active' : 'openClick'">全自动</button>
        <button @click.prevent="formData.sm_auto = 0" :class="formData.sm_auto == 0 ? 'prohibitClick-active' : 'prohibitClick'">半自动</button>
      </a-descriptions-item>
    </a-descriptions>
    <template #footer>
      <div class="footer">
        <a-button @click="close" style="width: 48%; height: 50px; font-size: 28px; color: #fff; background-color: #ccc">取消</a-button>
        <a-button type="primary" @click="save" style="width: 48%; height: 50px; font-size: 28px">确认</a-button>
      </div>
    </template>
  </a-modal>
</template>

<script setup>
import { ref, computed } from 'vue'
import { Message } from '@arco-design/web-vue'
import useMainStore from '../../../store/main/main'
import { storeToRefs } from 'pinia'
import useSetStore from '../../../store/setting/setting.js'
const setStore = useSetStore()
const { setting } = storeToRefs(setStore)
const mainStore = useMainStore()
const { product, breed } = storeToRefs(mainStore)
const formData = ref({
  machine_id: '',
  machine_name: '',
  product_name: '',
  breed_name: '',
  status: 1
})
const visible = ref(false)
function setMachineModalVisible(item) {
  formData.value = item
  visible.value = true
}
const machineOptions = computed(() => {
  const pro = product.value.map((item) => {
    return { label: item.product_name, value: item.product_name }
  })
  return pro
})

const breedOptions = computed(() => {
  const bre = breed.value.map((item) => {
    return { label: item.breed_name, value: item.breed_name }
  })
  return bre
})
const save = () => {
  mainStore.getSmEdit(formData.value).then(() => {
    Message.success('编辑成功')
    visible.value = false
  })
}
const close = () => {
  mainStore.getSmList()
  visible.value = false
}
defineExpose({ setMachineModalVisible })
</script>

<style lang="less" scoped>
:deep(.arco-descriptions-item-label-block) {
  color: #121314;
  font-size: 24px;
}
:deep(.arco-select-view-single.arco-select-view-size-large .arco-select-view-value) {
  font-size: 26px;
  font-weight: 500;
  color: #121314;
}
.footer {
  display: flex;
  justify-content: space-between;
}
.openClick-active {
  width: 44%;
  height: 50px;
  font-size: 20px;
  font-weight: 500;
  margin-left: 0%;
  border: none;
  border-radius: 5px;
  background-color: #157ae3;
  color: #fff;
}
.prohibitClick-active {
  width: 44%;
  height: 50px;
  font-size: 20px;
  font-weight: 500;
  margin-left: 12%;
  border: none;
  border-radius: 5px;
  background-color: #cf0303;
  color: #fff;
}
.openClick {
  width: 44%;
  height: 50px;
  font-size: 20px;
  font-weight: 500;
  margin-left: 0%;
  border: 1px solid #ccc;
  border-radius: 5px;
  background-color: #fff;
}
.prohibitClick {
  width: 44%;
  height: 50px;
  font-size: 20px;
  font-weight: 500;
  margin-left: 12%;
  border: 1px solid #ccc;
  border-radius: 5px;
  background-color: #fff;
}
</style>
